@import '../../../../assets/less/base/variables.less';
@import '../../../../assets/less/base/newTabPageCommom.less';

.page-top-action {
	padding: 0 20px;
	.search-box {
		margin-bottom: 14px;
		.el-input {
			width: 248px;
			margin-right: 20px;
		}
	}
	.action {
		margin-bottom: 14px;
	}
}

.info-main-content {
	padding: 0 20px;
	padding-bottom: 40px;
}

.ake-icon-font {
	width: 26px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	padding: 0;
	margin-right: 3px;
	margin-top: 3px;
	vertical-align: middle;
}

.moreDetailDialogVisible-form {
	padding-left: 50px;
	.el-form-item {
		margin-bottom: 5px !important;
	}
}

.screen-setting {
	width: 500px;
	padding-top: 20px;
	padding-left: 20px;
	.screen-setting-top {
		display: flex;
		justify-content: space-between;
		margin-top: 24px;
		.tips {
			font-size: 14px;
			color: @grey99;
		}
	}
	.screen-setting-tips {
		display: flex;
		font-size: 12px;
		color: #999999;
		margin-top: 5px;
		.tips-item {
			margin-left: 24px;
			&:nth-child(2) {
				margin-left: 40px;
			}
			&:nth-child(3) {
				margin-left: 44px;
			}
		}
	}
	.screen-list {
		margin-top: 15px;
	}
	.screen-list-item {
		margin-bottom: 10px;
		background: @grayF2;
		border-radius: 4px;
		display: flex;
		// height: 42px;
		color: @gray47;
		padding-left: 20px;
		.cell-num {
			margin-right: 30px;
			line-height: 42px;
		}
		.screen-bd {
			flex: 1;
			line-height: 42px;
			img {
				margin: 10px 10px 10px 0px;
				width: 100px;
			}
		}
		.edit-icon {
			width: 60px;
			text-align: center;
			color: @blue;
			cursor: pointer;
			line-height: 42px;
		}
	}
}

.srceen-setting-content {
	.srceen-setting-content-title {
		font-size: 14px;
		color: @black;
		margin-bottom: 10px;
	}
	.screen-preview {
		padding: 20px;
		border-radius: 4px;
		background: @darkGrey;
		font-size: 30px;
		color: #fff;
		margin-bottom: 25px;
		min-height: 82px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.screen-edit-pre {
		background: #ffffff;
		border: 1px solid #d8d8d8;
		border-radius: 4px;
		display: flex;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 25px;
		min-height: 52px;
		display: flex;
		flex-wrap: wrap;
		.pre-item {
			height: 30px;
			padding-left: 10px;
			display: flex;
			font-size: 14px;
			color: @blue;
			border-radius: 4px;
			margin-right: 15px;
			margin-bottom: 10px;
			padding-right: 4px;
			background: @greyee;
			align-items: center;
			.el-icon-close {
				color: @grey66;
				margin-left: 4px;
				cursor: pointer;
				font-size: 12px;
				height: 16px;
				width: 16px;
				line-height: 16px;
				vertical-align: middle;
				border-radius: 50%;
				text-align: center;
				&:hover {
					background-color: #409eff;
					color: #fff;
				}
			}
		}
		.pre-item-constom {
			height: 30px;
			padding-left: 12px;
			padding-right: 4px;
			display: flex;
			font-size: 14px;
			color: @gray47;
			border-radius: 4px;
			margin-right: 15px;
			margin-bottom: 10px;
			border: 1px solid @grayD8;
			align-items: center;
			.el-icon-close {
				color: @darkGrey;
				margin-left: 4px;
				cursor: pointer;
				font-size: 12px;
				height: 16px;
				width: 16px;
				line-height: 16px;
				vertical-align: middle;
				border-radius: 50%;
				text-align: center;
				&:hover {
					background-color: #409eff;
					color: #fff;
				}
			}
		}
	}
	.tags {
		margin-bottom: 25px;
		display: flex;
		justify-content: space-between;
		.tag-item {
			display: flex;
			font-size: 14px;
			color: @blue;
			border-radius: 4px;
			background: @greyee;
			align-items: center;
			padding: 0 12px;
			height: 30px;
			cursor: pointer;
		}
	}
	.custom-input {
		width: 220px;
		margin-bottom: 25px;
		position: relative;
		.inputBtn {
			position: absolute;
			right: 0;
			top: 0;
			width: 55px;
			height: 30px;
			z-index: 10;
		}
		.el-input-group__append {
			background-color: @blue;
			.el-icon-plus {
				font-weight: bold;
				color: #fff;
			}
		}
	}
}

@grey99: #999999;
@grey97: #979797;
@green: #83cf2e;
.setting-header {
	display: flex;
	align-items: center;
	margin-bottom: 40px;

	.title {
		display: inline-block;
		margin-right: 18px;
	}

	.detail {
		color: @grey99;
	}
}

.color-list-box {
	display: flex;
	// justify-content: space-between;
}

.color-item {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	border-radius: 4px;
	cursor: pointer;

	&.has-border {
		border: 1px solid @grey97;
	}

	&.active {
		border: 4px solid @green;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: -10px;
			top: -10px;
			display: inline-block;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: url('../../../../assets/img/ic_opened_addvaule.svg') no-repeat center center;
			box-shadow: 4px 3px 4px 0 rgba(0, 0, 0, 0.3);
		}

		&::before {
			content: '';
			position: absolute;
			top: -9px;
			left: -9px;
			right: -9px;
			bottom: -9px;
			display: inline-block;
			background-color: transparent;
			border-radius: 8px;
			border: 5px solid rgba(111, 200, 13, 0.3);
		}
	}
}

.el-radio + .el-radio {
	margin-left: 36px;
}

.quick-setting-dialog {
	.quick-tips {
		font-size: 16px;
		color: #333333;
		margin-bottom: 20px;
	}
	.search-box {
		width: 300px;
		margin-bottom: 10px;
	}
	.quick-channel-list {
		border: 1px solid #d8d8d8;
		border-radius: 3px;
		padding: 15px;
		width: 300px;
		height: 360px;
		overflow-y: scroll;
		.all-checkbox {
			margin-bottom: 10px;
		}
		.list-bd {
			.el-checkbox-group {
				display: flex;
				flex-direction: column;
			}
			.el-checkbox {
				margin-left: 18px;
				margin-bottom: 5px;
			}
		}
	}
}

.voice-date-item {
	display: flex;
	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 164px;
	}
}

.voice-date-item {
	display: flex;
	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 140px;
	}
}

.screenBrightness-tips {
	background: #f4f4f4;
	border-radius: 4px;
	font-size: 12px;
	color: #474747;
	padding: 0 20px;
	.tips-tag {
		background: @red;
		color: #fff;
		font-size: 12px;
		border-radius: 4px;
		display: inline-block;
		padding: 1px 3px;
		margin-right: 8px;
	}
}

.voice-item .unit {
	position: absolute;
	right: -48px !important;
	top: 5px;
	font-size: 12px;
}

.screenBrightness-setting-item {
	margin-top: 30px;
	&:last-child {
		margin-top: 18px;
	}
	.title {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.voice-date-item {
		.el-form-item {
			margin-bottom: 10px;
		}
	}
}
